<template>
  <div class="tpl-content-wrapper">
    <ol class="am-breadcrumb">
      <li><a href="#" class="am-icon-home">首页</a></li>
      <li><a href="#">车位系统</a></li>
      <li class="am-active">车位管理</li>
    </ol>
    <div class="tpl-portlet-components">
      <div class="tpl-block">
        <div class="am-g">
          <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
              <div class="am-btn-group">
                <router-link :to="{name: 'ProjectZcCreate'}" type="button" class="am-btn am-btn-default am-btn-success">
                  <span class="am-icon-plus"></span> 新增车位
                </router-link>
                <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                  <div class="am-modal-dialog">
                    <div class="am-modal-hd">表单导入Excel
                      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd">
                      <div class="am-form-inline" role="form">
                        <div class="am-form-group">
                          <input type="name" class="am-form-field" placeholder="文件名" v-model="ex.name">
                        </div>

                        <div class="am-form-group">
                          <select id="doc-select-1" class="am-form-field" v-model="ex.page">
                            <option v-for="page in ex.pageSum" :value="page">{{(page - 1) * 500}} ~ {{page * 500}} 数据</option>
                          </select>
                        </div>
                        &nbsp;<button type="button" class="am-btn am-btn-default" @click="excelExport(ex.name, ex.page)" data-am-modal-close>导出</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-4">
            <div class="am-input-group am-input-group-sm">
              <input v-model="fuzzy" @keyup.enter="onSearch" type="text" class="am-form-field" placeholder='请输入“关键词”查看信息'>
              <span class="am-input-group-btn">
                <button @click="onSearch" class="am-btn  am-btn-default am-btn-secondary tpl-am-btn-success am-icon-search" type="button"></button>
                <button class="am-btn am-btn-secondary" data-am-collapse="{target: '#collapse-nav'}">更多条件<i class="am-icon-chevron-down"></i></button>
              </span>
            </div>
          </div>
        </div>
        <nav>
          <div id="collapse-nav" class="tpl-content-wrapper am-collapse am-animation-fade" style="padding-left:0;">
            <div class="tpl-portlet-components">
              <div class="tpl-block ">
                <div class="am-g tpl-amazeui-form">
                  <form class="am-form">
                    <time-search @setEctime="setEctime" @setSctime="setSctime"></time-search>
                    <div class="am-u-md-3"></div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <div class="am-g am-animation-fade">
          <div class="am-u-sm-12">
            <form class="am-form">
              <table class="am-table am-table-striped am-table-hover table-main" id="grid">
                <thead>
                  <tr>
                    <th class="table-id">序号</th>
                    <th>车位名称</th>
                    <th>车位编号</th>
                    <th class="am-hide-sm-only">物理状态</th>
                    <th>使用者</th>
                    <th class="am-hide-sm-only">数据状态</th>
                    <th class="am-hide-sm-only">在线状态</th>                    
                    <th class="am-hide-sm-only">创建时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(list, index) in lists">
                    <td>{{index + 1}}</td>
                    <td>
                      <a @click="openInfo(list._id,list.type)">
                        {{list.name}}
                      </a>
                    </td>
                    <td class="am-hide-sm-only">{{list.srcMac}}</td>
                    <td class="am-hide-sm-only">{{list.state | parkStateFmt}}</td>
                    <td v-if="list.dState==='2'||list.dStat==='3'||list.dStat==='4'">{{list.user && list.user.phone ? list.user.phone : ''}}</td>
                    <td v-else></td>
                    <td class="am-hide-sm-only">{{list.dState | dataStateFmt}}</td>
                    <td class="am-hide-sm-only" id="stateUtime">{{list.stateUtime | stateUtimeFmt}}</td>
                    <td class="am-hide-sm-only">{{list.ctime | date}}</td>
                    <!-- <td class="am-hide-sm-only">
                     <a @click="changeState(list)" class="cw-btn">{{list.state === '1001'? '占用车位':'释放车位'}}</a>
                   </td> -->
                 </tr>
               </tbody>
             </table>
             <pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
             <hr>
           </form>
         </div>
       </div>
     </div>
   </div>
   <alert :test="alertText"></alert>
 </div>
</template>
<script>
  import * as apis from '../../../apis'
  import excel from '../../../assets/excel'
  export default {
    data() {
      return {
        lists: [],
        state: '', type: '', fuzzy: '', recommenderType: '', sctime: '', ectime: '',
        count: 0,
        page: 1,
        pageSize: 20,
        ex: {name: '', page: 1, pageSum: 0},
        click: 'a',
        cstate: ''
      }
    },
    created() {
      this.getCount()
      $('#stateUtime').addClass('super')
    },
    mounted() {
    },
    computed: {
    },
    methods: {
      changeState(list){
        console.log('list', list)
        let srcMac = list.srcMac
        console.log('srcMac', srcMac)
        if(list.state === '1001'){
          var state = '2002'
          this.cstate = '1002'
        }else if(list.state === '1002'){
          var state = '2001'
          this.cstate = '1001'
        }
        console.log('state', state)
        apis.changeState(state, srcMac).then(({data: data}) => {
          console.log('state', 'chenggong')
          if (data.errcode === 0) {
            this.lists = []
            setTimeout(() => {
              this.getCount()
            },500)
            
                } else {
                  this.lists = []
                }
        })

      },
      getCount() {
        apis.projectCount(this.state, this.type, this.fuzzy, this.recommenderType, this.sctime, this.ectime).then(({data: data}) => {
          console.log('count', data)

          if (data && data.errcode === 0) {
            this.allCount = data.data.count
            this.count = Math.ceil(data.data.count / this.pageSize)
            this.getLists()
          } else {
            this.lists = []
          }
        })
      },
      getLists() {
        apis.projectList(this.page, this.pageSize, this.state, this.type, this.fuzzy, this.recommenderType, this.sctime, this.ectime).then(({data: data}) => {
          console.log('list', data)
          if (data && data.errcode === 0 ) {
            this.lists = data.data.list
            console.log('list',this.lists)
          }
        })
      },
      changePage(page) {
        this.page = page
        this.getLists()
      },
      onSearch() {
        this.page = 1
        this.getCount()
      },
      setSctime(val) {
        this.sctime = val
      },
      setEctime(val) {
        this.ectime = val
      },
      openInfo(pid,type) {
        let rname = 'ProjectZc'
        this.$router.push({ name: rname, params: {id: pid}})
      },
      renovate (page) {
        this.getCount()
      },
      excelExport (name, page) {
        let col = {name: '项目名称', state: {name: '状态', type: {'0': '编辑中', '1': '筹款中', '2': '已结束', '3': '暂停中'}}, type: {name: '类型', type: {'2': '长期筹款', '1': '众筹筹款'}},tmoney: '目标/固定金额', dmoney: '已筹金额', location: '地址', stime: {name: '开始时间', time: 1}, etime: {name: '结束时间', time: 1}, recommenderType: {name: '推荐类型', type: {'0': '无', '1': '推荐'}}, recommenderDeadline: {name: '推荐期限', time: 1}, ctime: {name: '创建时间', time: 1}}
        apis.projectList(page, 500).then(({data: data}) => {
          if (data && data.result_code === 1 && data.result.projectList) {
            let rows = data.result.projectList
            excel.export(col, rows, name)
            this.ex.name = ''
            this.ex.page = 1
          }
        })
      }
    }
  }

</script>
<style>
  .am-btn-group .am-btn{
    margin-right: 0.3em;
  }
  .cw-btn{
    display: inline-block;
    width: 80px;
    height: -1px;
    background: #3bb4f2;
    border-radius: 6px;
    text-align: center;
    color: #fff;
    padding: 4px;
  }
  .super{
    color:red;
  }
</style>